import UploadImg from '@/components/upload-img'
import useDelData from '@/hooks/use-del-data';
import useFetchList from '@/hooks/use-fetch-list';
import useInsert from '@/hooks/use-insert';
import { formatDate } from '@/utils/formatDate';
import { Button, DatePicker, Form, Image, Input, Modal, Space, Table } from 'antd'
import React from 'react'
const { RangePicker } = DatePicker;

function BannerManage() {
  const { dataSource, total, filterParams, setFilterParams, getData } = useFetchList({
    url: '/admin/base/banner/page'
  })
  const { ids, setIds, delData } = useDelData({
    url: "/admin/base/banner/delete",
    success: () => {
      setFilterParams({
        ...filterParams,
        page: 1
      })
    }
  })
  const columns = [
    {
      title: '图片',
      dataIndex: 'img',
      key: 'id',
      render: (text) => {
        return <Image width={100} src={text} />
      }
    },
    {
      title: '操作',
      dataIndex: 'id',
      key: 'id',
      render: (test, item) => {
        return (
          <Space>
            <Button danger onClick={() => delData([item.id])}>删除</Button>
          </Space>
        )
      }
    },
  ];
  const [form] = Form.useForm()
  const { handleOk, setIsModalOpen, isModalOpen } = useInsert({
    form,
    createData: (data: any) => {
      fetch("/admin/base/activityManage/add", {
        method: "POST",
        body: JSON.stringify(data),
        headers: {
          "Content-Type": "application/json"
        }
      }).then(res => res.json()).then(res => {
        // console.log(res)
      })
    },
    success: () => {
      setFilterParams({ ...filterParams, page: 1 })
    },
  })
  //modal
  const handleCancel = () => {
    setIsModalOpen(false)
  }
  return (
    <div>
      <Space>
        <Button onClick={() => getData()}>刷新</Button>
        <Button type='primary' onClick={() => setIsModalOpen(true)}>新增</Button>
        <Button danger onClick={() => delData()}>删除</Button>
      </Space>
      <Table style={{ marginTop: '20px' }} columns={columns} dataSource={dataSource} pagination={{
        total,
        pageSize: filterParams.size,
        current: filterParams.page,
        onChange: (page) => {
          setFilterParams({
            ...filterParams,
            page,
          })
        }
      }}
        rowSelection={{
          type: 'checkbox',
          onChange: (keys) => {
            // console.log(keys);
            setIds(keys)
          }
        }} />
      <Modal title="新增" open={isModalOpen} onOk={handleOk} onCancel={handleCancel}>
        <Form labelCol={{ span: 4 }} wrapperCol={{ span: 20 }} form={form}>
          <Form.Item label='图片' name='img'>
            <UploadImg />
          </Form.Item>
        </Form>
      </Modal>
    </div>
  )
}


BannerManage.wrappers = ["@/wrappers/auth"]
export default BannerManage